<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Customize</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

    <script src="./js/vue.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/qs.js"></script>
    <link href="./css/antd.min.css" rel="stylesheet">
    <script src="./js/moment.min.js"></script>

    <style>
        img {
            max-width: 100%;
            height: auto;

        }

        #app {

            padding: 3px;
        }
    </style>
</head>
<body>
<div id="app">
    <p><img src="https://ossvideo.tangcn.com.cn/res/ggc/wp-content/uploads/2022/11/on.jpg"></p>
    <p>Your Name：</p>
<!--    <a-input v-model="message" placeholder="编辑我……"></a-input>-->
    <a-input v-model="message" placeholder=""></a-input>
    <p>input 表单消息是: {{ message }}</p>

    <p>Age：</p>
    <a-input v-model="message2"></a-input>


    <p>Gender：</p>
    <a-radio-group v-model="radioValue" @change="onChange">
        <a-radio :value="1">
            Male
        </a-radio>
        <a-radio :value="2">
            Female
        </a-radio>
    </a-radio-group>

    <p>Email：</p>
    <a-input v-model="email"></a-input>

    <p>请简要描述您的学习目标和期望：</p>
    <a-textarea v-model="description" ></a-textarea>

    <div style="height: 50px"></div>
    <a-button @click="submitForm">提交/Change Info</a-button>
    <a-button @click="initForm">Confirm Submission</a-button>

    <div style="height: 50px"></div>
</div>

<script>
    const app = {
        el: "#app",
        data() {
            return {
                message: '',
                type: 0,
                user_id: 0,
                language: 0,
                message2: '',
                email: '',
                description: '',
                radioValue: 0
            }
        },
        mounted() {
            // let id = this.$route.query.id;
            this.type = this.getQueryString("type"); //参数名1
            this.user_id = this.getQueryString("user_id"); //参数名1
            this.language = this.getQueryString("language"); //参数名1
            console.log("type => ", this.type, "user_id => ", this.user_id);
            this.initForm();
        },
        methods: {
            submitForm() {
                axios({
                    method: 'post',
                    url: 'https://www.fastmock.site/mock/5127d5701151c3df91aecb676866ba45/testmock/api/testapi',
                    data: Qs.stringify({
                        message: '',
                        message2: '菜鸟教程\r\nhttps://www.runoob.com'
                    })
                })
                    .then(function (response) {
                        console.log(response);
                        let data = response.data
                        if (data.rc == 0) {
                            alert(data.msg)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            //'http://app.tangchinese.org/api-app-data/?module=post&action=r_post_by_customize&platform=app&type=0&user_id=1',
            initForm() {
                axios({
                    method: 'post',
                    url: 'http://app.tangchinese.org/api-app-data/?module=post&action=r_post_by_customize&platform=app',
                    data: Qs.stringify({
                        type: this.type,
                        user_id: this.user_id
                    })
                })
                    .then(function (response) {
                        console.log(response);
                        let data = response.data
                        if (data.rc === 0) {
                            // alert(data.msg)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            getQueryString(name) {
                let reg = `(^|&)${name}=([^&]*)(&|$)`
                let r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },

            onChange(e) {
                console.log('radio checked', e.target.value);
            },
        }
    }

    function init() {
        new Vue(app)
    }
</script>
<script src="./js/antd.min.js" onload="init()"></script>
</body>
</html>
